<div class="easyui-layout" data-options="fit:true">

    <!--查询-->
    <div data-options="region:'north',border:false" style="height:50px;width: 1100px;padding:5px">
        <form id="accUser_query_form" style="height:50px;width: 1100px">
            昵称： <input class="easyui-textbox" id="accUser_query_form_nickname" name="nickname"/>
            角色： <input id="accUser_query_form_role_id" name="role_id" style="width:100px"/>
            状态： <input id="accUser_query_form_status" name="status" style="width:100px"/>
            创建时间：<input class="easyui-datebox" data-options="editable:false,required:false,validType:'date'"
                        id="accUser_query_form_date_start" name="date_start" style="width: 120px;"/>
            至：<input class="easyui-datebox" data-options="editable:false,required:false,validType:'date'"
                    id="accUser_query_form_date_end" name="date_end" style="width: 120px;"/>

            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
               onclick='accUserQuery();'>查询</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-clear'"
               onclick='accUserQueryClear();'>重置</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
               onclick='accUserAdd();'>新增</a>
        </form>
    </div>

    <!--        用户列表-->
    <div data-options="region:'center'" style="border:0;padding:5px;overflow:hidden;">
        <div style="width:1100px;height:100%;overflow:auto;border:1px solid #ccc;float:left">
            <table id="accUser_user_grid"></table>
        </div>
    </div>
</div>

<!--编辑用户-->
<div id="accUser_edit_dialog">
    <form id="accUser_edit_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td><input type="hidden" id="accUser_edit_form_id" name="id"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">登录名:</td>
                <td><input id="accUser_edit_form_username" name="username" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">昵称:</td>
                <td><input id="accUser_edit_form_nickname" name="nickname" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">密码:</td>
                <td><input id="accUser_edit_form_password" name="password" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色:</td>
                <td><input id="accUser_edit_form_role_id" name="role_id" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">状态:</td>
                <td><input id="accUser_edit_form_status" name="status" required/></td>
            </tr>
        </table>
    </form>
</div>

<!--新增用户-->
<div id="accUser_add_dialog">
    <form id="accUser_add_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td style="text-align: right;">登录名:</td>
                <td><input id="accUser_add_form_username" name="username" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">昵称:</td>
                <td><input id="accUser_add_form_nickname" name="nickname" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">密码:</td>
                <td><input id="accUser_add_form_password" name="password" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色:</td>
                <td><input id="accUser_add_form_role_id" name="role_id" class="easyui-textbox" required/></td>
            </tr>
        </table>
    </form>
</div>

<script>

    $(function () {
        initUserComponents();
        initUserGrid();
    });

    function initUserGrid() {
        $('#accUser_user_grid').datagrid({
            url: '/queryAllUsers',
            idField: 'id',
            // fitColumns: true,
            fit: true,
            scrollbarSize: 1,
            striped: true,
            checkOnSelect: false,
            selectOnCheck: false,
            singleSelect: true,
            pagination: true,
            pageSize: 15,
            pageList : [15, 30, 60 ],
            columns: [
                [
                    {field: 'id', title: '编码', width: 50, align: 'center', halign: 'center'},
                    {field: 'username', title: '登录名', width: 100, align: 'center', halign: 'center'},
                    {field: 'nickname', title: '昵称', width: 100, align: 'center', halign: 'center'},
                    {field: 'role_sign', title: '角色', width: 100, align: 'center', halign: 'center'},
                    {field: 'status', title: '状态', width: 50, align: 'center', halign: 'center',
                        formatter: function (value, row, index) {
                            if (value === 1) {
                                return '可用';
                            } else if (value === 0) {
                                return '不可用';
                            } else {
                                return '';
                            }
                        }
                    },
                    {field: 'create_time', title: '创建时间', width: 180, align: 'center', halign: 'center'},
                    {field: 'update_time', title: '更新时间', width: 180, align: 'center', halign: 'center'},
                    {field: 'x', title: '操作', width: 100, align: 'center', halign: 'center',
                        formatter: function (value, row, index) {
                            return '<a href="javascript:void(0)" onclick="updateUserButton(' + row.id + ')">编辑</a>' +
                                '<a href="javascript:void(0)" onclick="deleteUserButton(' + row.id + ')">|删除</a>';
                        }
                    }
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {},
            onClickRow: function (index, row) {}
        });
    }

    function initUserComponents() {
        $('#accUser_edit_form_status').combobox({
            valueField: 'id', textField: 'text',
            panelHeight: 70, editable: false,
            data: [
                {"id": 1, "text": "可用"},
                {"id": 0, "text": "不可用"}
            ]
        });

        $('#accUser_query_form_status').combobox({
            valueField: 'id', textField: 'text',
            panelHeight: 100, editable: false,
            data: [
                {"id": 2, "text": "全部", selected:true},
                {"id": 1, "text": "可用"},
                {"id": 0, "text": "不可用"}
            ]
        });

        $("#accUser_edit_form_role_id").combogrid({
            url: '/queryAllRoles',
            idField: 'id', textField: 'sign',
            panelWidth: 235, panelHeight: 200,
            editable: false,
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '名称', width: 100},
                    {field: 'sign', title: '标识', width: 80}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $("#accUser_add_form_role_id").combogrid({
            url: '/queryAllRoles',
            idField: 'id', textField: 'sign',
            panelWidth: 235, panelHeight: 200,
            editable: false,
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '名称', width: 100},
                    {field: 'sign', title: '标识', width: 80}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $("#accUser_query_form_role_id").combogrid({
            url: '/queryAllRoles',
            idField: 'id', textField: 'sign',
            panelWidth: 235, panelHeight: 200,
            editable: false,
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '名称', width: 100},
                    {field: 'sign', title: '标识', width: 80}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $('#accUser_add_form_username').textbox({
            invalidMessage: '用户名已占用',
            validType: {
                // 请求服务器，校验用户名是否可用
                remote:['/verifyUserName', 'username']
            }
        });
    }

    // 编辑用户
    function updateUserButton(user_id) {
        $('#accUser_user_grid').datagrid("selectRecord", user_id);
        var user = $('#accUser_user_grid').datagrid("getSelected");
        if (!user) {
            $.messager.alert("提示", "请选择要编辑的用户！", 'info');
            return;
        }

        // 加载编辑角色内容
        $("#accUser_edit_form").form('load', {
            id: user.id,
            username: user.username,
            nickname: user.nickname,
            password: user.password,
            role_id: user.role_id,
            status: user.status
        });

        $('#accUser_edit_dialog').dialog({
            title: '编辑用户', iconCls: 'icon-edit',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accUser_edit_form').form('clear').form('reset');
            },
            buttons: [
                {
                    id: 'accUser_edit_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: updateUser
                }, {
                    id: 'accUser_edit_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accUser_edit_dialog").dialog("close");
                    }
                }
            ]
        });
    }

    function updateUser() {
        if (!$('#accUser_edit_form').form('validate')) {
            return;
        }

        $('#accUser_edit_form').form('submit', {
            url: '/updateUser',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "用户更新失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '用户更新成功！', timeout: 2000, showType: 'slide'});

                $("#accUser_edit_dialog").dialog("close");
                $("#accUser_user_grid").datagrid("reload");
            }
        });
    }

    // 新增用户
    function accUserAdd() {
        $('#accUser_add_dialog').dialog({
            title: '新增用户', iconCls: 'icon-add',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accUser_add_form').form('clear').form('reset');
            },
            buttons: [
                {
                    id: 'accUser_add_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: addUser
                }, {
                    id: 'accUser_add_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accUser_add_dialog").dialog("close");
                    }
                }
            ]
        });
    }
    
    function addUser() {
        if (!$('#accUser_add_form').form('validate')) {
            return;
        }

        $('#accUser_add_form').form('submit', {
            url: '/addUser',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "新增用户失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '新增用户成功！', timeout: 2000, showType: 'slide'});

                $("#accUser_add_dialog").dialog("close");
                $("#accUser_user_grid").datagrid("reload");
            }
        });
    }

    function deleteUserButton(user_id) {
        $.messager.confirm('确认', '您确认想要删除该用户吗？', function (r) {
            if (!r) {
                return;
            }

            $.ajax({
                url: '/deleteUserById',
                type: "post",
                data: {id: user_id},
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code !== 200) {
                        $.messager.alert("提示", data.message, 'info');
                        return;
                    }

                    $.messager.show({title: '提示', msg: '删除用户成功！', timeout: 2000, showType: 'slide'});
                    $("#accUser_user_grid").datagrid("reload");
                }
            });
        });
    }

    function accUserQuery() {
        $("#accUser_user_grid").datagrid('load', {
            nickname:$('#accUser_query_form_nickname').val(),
            role_id:$('#accUser_query_form_role_id').val(),
            status:$('#accUser_query_form_status').val(),
            date_start:$('#accUser_query_form_date_start').val(),
            date_end:$('#accUser_query_form_date_end').val()
        });
    }
    
    function accUserQueryClear() {
        $('#accUser_query_form_nickname').textbox('clear');
        $('#accUser_query_form_role_id').combogrid('clear');
        $('#accUser_query_form_status').combobox('setValue', 2);
        $('#accUser_query_form_date_start').datebox('clear');
        $('#accUser_query_form_date_end').datebox('clear');
        $("#accUser_user_grid").datagrid('load', {
            nickname: null,
            role_id: null,
            status: null,
            date_start: null,
            date_end: null
        });
    }
</script>